<template>
  <div
    class="circle"
    :class="[circleClass, textColor]"
    :style="[circleSize, circleAngle]"
  >
    Hi!
  </div>
</template>

<script>
export default {
  props: ["circleClass", "textColor", "circleSize", "circleAngle"],
};
</script>

<style>
.circle {
  width: 150px;
  height: 150px;
  border-radius: 100%;
  background-color: #45d619;
  text-align: center;
  color: #fff;
  line-height: 150px;
  font-size: 32px;
  font-weight: bold;
}

.purple {
  background-color: #767dea;
}
.text-black {
  color: #424242;
}
.text-orange {
  color: #ffc26f;
}
</style>
